<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="./js/vue.js"></script>
    <script src="./js/index.js"></script>

    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/wasmCall.js"></script>
    <script src="./js/bundle.js"></script>
</head>

<body>

<div id="abcd">
    <el-container>
        <el-main>
            <el-tabs type="card" @tab-click="cardClick">
                <el-tab-pane>
                    <span slot="label"><i class="el-icon-date"></i> 计算器</span>

                    <el-row>
                        <template>
                            <el-select style="width: 300px" v-model="currentRule" placeholder="请选择厨神计算器">
                                <el-option
                                        v-for="item in ruleList"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                        <el-button @click="calculator">计算</el-button>
                    </el-row>


                    <el-row style="margin-top: 10px">
                        <el-progress v-if="jisuanPercentage>0" :percentage="jisuanPercentage"></el-progress>
                    </el-row>

                    <el-row>


                        <el-table
                                :data="tableData"
                                size="small"
                                header-align="center"
                                :stripe="true"
                                :border="true"
                                style="width: 100%">
                            <el-table-column
                                    prop="chefs[0].chef"
                                    label="厨师"
                                    width="70">
                            </el-table-column>
                            <el-table-column
                                    prop="chefs[0].equip"
                                    label="厨具"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    label="菜谱搭配"
                                    width="260"
                            >
                                <template slot-scope="scope">

                                    <el-table
                                            :data="scope.row.chefs[0].recipes"
                                            size="mini"
                                            style="width: 100%">
                                        <el-table-column
                                                prop="recipe"
                                                label="菜谱"
                                                width="130">
                                        </el-table-column>
                                        <el-table-column
                                                prop="count"
                                                label="数量"
                                                width="50">
                                        </el-table-column>
                                        <!--                                        <el-table-column-->
                                        <!--                                                prop="score"-->
                                        <!--                                                label="总得分"-->
                                        <!--                                                width="60">-->
                                        <!--                                        </el-table-column>-->


                                    </el-table>
                                </template>
                            </el-table-column>


                            <el-table-column
                                    prop="chefs[1].chef"
                                    label="厨师"
                                    width="70">
                            </el-table-column>
                            <el-table-column
                                    prop="chefs[1].equip"
                                    label="厨具"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    label="菜谱搭配"
                                    width="263"
                            >
                                <template slot-scope="scope">

                                    <el-table
                                            :data="scope.row.chefs[1].recipes"
                                            size="mini"
                                            style="width: 100%">
                                        <el-table-column
                                                prop="recipe"
                                                label="菜谱"
                                                width="130">
                                        </el-table-column>
                                        <el-table-column
                                                prop="count"
                                                label="数量"
                                                width="50">
                                        </el-table-column>
                                        <!--                                        <el-table-column-->
                                        <!--                                                prop="totalprice"-->
                                        <!--                                                label="总得分"-->
                                        <!--                                                width="60">-->
                                        <!--                                        </el-table-column>-->


                                    </el-table>
                                </template>
                            </el-table-column>


                            <el-table-column
                                    prop="chefs[2].chef"
                                    label="厨师"
                                    width="70">
                            </el-table-column>
                            <el-table-column
                                    prop="chefs[2].equip"
                                    label="厨具"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    label="菜谱搭配"
                                    width="265"
                            >
                                <template slot-scope="scope">

                                    <el-table
                                            :data="scope.row.chefs[2].recipes"
                                            size="mini"
                                            style="width: 100%">
                                        <el-table-column
                                                prop="recipe"
                                                label="菜谱"
                                                width="130">
                                        </el-table-column>
                                        <el-table-column
                                                prop="count"
                                                label="数量"
                                                width="50">
                                        </el-table-column>
                                        <!--                                        <el-table-column-->
                                        <!--                                                prop="totalprice"-->
                                        <!--                                                label="总得分"-->
                                        <!--                                                width="60">-->
                                        <!--                                        </el-table-column>-->


                                    </el-table>
                                </template>
                            </el-table-column>


                            <el-table-column
                                    prop="score"
                                    label="得分"
                                    width="100">
                            </el-table-column>


                        </el-table>

                        <div style="float:right ">
                            <el-pagination
                                    :hide-on-single-page="hidePagination"
                                    @current-change="handleCurrentChange"
                                    :current-page.sync="page.currentPage"
                                    :page-size="page.pageSize"
                                    layout="prev, pager, next, jumper"
                                    :total="page.total">
                            </el-pagination>
                        </div>
                    </el-row>

                </el-tab-pane>
                <el-tab-pane label="消息中心">
                    <span slot="label"><i class="el-icon-date"></i> 个人数据</span>
                    <el-row>
                        <el-col>
                            <span>从图鉴网导入个人数据</span>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <el-input
                                    type="textarea"
                                    :rows="18"
                                    resize="none"
                                    placeholder="请输入内容"
                                    v-model="textarea">
                            </el-input>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <el-button @click="saveRecipesAndChefsData">导入</el-button>
                        </el-col>
                    </el-row>

                    <!--                    <el-divider></el-divider>-->
                    <!--                    <el-row>-->
                    <!--                        <el-col>-->
                    <!--                            个人厨具-->
                    <!--                        </el-col>-->
                    <!--                    </el-row>-->
                    <!--                    <el-row>-->
                    <!--                        <el-col>-->
                    <!--                            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"-->
                    <!--                                         @change="handleCheckAllChange">全选-->
                    <!--                            </el-checkbox>-->
                    <!--                            <el-checkbox-group v-model="equips">-->
                    <!--                                <el-checkbox-button style="margin-right: 10px;border-left: 1px solid #DCDFE6;"-->
                    <!--                                                    v-for="equipOrigin in equipOrigins" :label="equipOrigin"-->
                    <!--                                                    :key="equipOrigin">{{equipOrigin}}-->
                    <!--                                </el-checkbox-button>-->
                    <!--                            </el-checkbox-group>-->
                    <!--                        </el-col>-->
                    <!--                    </el-row>-->
                    <!--                    <el-row>-->
                    <!--                        <el-col>-->

                    <!--                            <el-button @click="saveEquipsData">确定</el-button>-->
                    <!--                        </el-col>-->
                    <!--                    </el-row>-->

                    <el-divider></el-divider>
                    <el-row style="margin-bottom: 10px">
                        <el-col :span="1">
                            个人厨具
                        </el-col>
                        <el-col :span="3">
                            一星厨具同时使用数量
                            <el-select style="width: 40%" v-model="gloabalEquipOption.rarityOneLimit"
                                       placeholder="一星厨具同时使用数量"
                                       size="small">
                                <el-option
                                        v-for="limit in rarityLimitOption"
                                        :key="limit"
                                        :label="limit"
                                        :value="limit">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="3">
                            二星厨具同时使用数量
                            <el-select style="width: 40%" v-model="gloabalEquipOption.rarityTwoLimit"
                                       placeholder="二星厨具同时使用数量"
                                       size="small">
                                <el-option
                                        v-for="limit in rarityLimitOption"
                                        :key="limit"
                                        :label="limit"
                                        :value="limit">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="3">
                            三星厨具同时使用数量
                            <el-select style="width: 40%" v-model="gloabalEquipOption.rarityThreeLimit"
                                       placeholder="三星厨具同时使用数量"
                                       size="small">
                                <el-option
                                        v-for="limit in rarityLimitOption"
                                        :key="limit"
                                        :label="limit"
                                        :value="limit">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <el-select v-for="(equipOption,index) in equipOptions" v-model="equipOption.value"
                                       placeholder="请选择"
                                       size="small" filterable clearable @clear="onClearEquipOrigin(index)"
                                       :ref="'select'+index">
                                <el-option
                                        v-for="equipOrigin in equipOrigins"
                                        :key="equipOrigin"
                                        :label="equipOrigin"
                                        :value="equipOrigin">
                                </el-option>
                            </el-select>
                            <el-button icon="el-icon-plus" @click="addEquipOption" size="small" circle></el-button>
                        </el-col>
                    </el-row>
                    <el-row style="margin-top: 10px">
                        <el-col>

                            <el-button @click="saveEquipsData">确定</el-button>
                        </el-col>
                    </el-row>

                </el-tab-pane>
                <el-tab-pane label="说明">
                    奖励倍数取自白采菊花
                    <br/>
                    游戏数据取自图鉴网
                    <br/>
                </el-tab-pane>

            </el-tabs>
        </el-main>

    </el-container>
</div>


<script>
    // 注册一个全局自定义指令 `v-focus`
    // Vue.directive('focus', {
    //     // 当被绑定的元素插入到 DOM 中时……
    //     inserted: function (el) {
    //         // 聚焦元素
    //         el.focus()
    //     }
    // })
    let app = new Vue({
        el: '#abcd',
        data: {
            page: {
                total: 0,
                pageSize: 10,
                currentPage: 1
            },
            jisuanPercentage: 0,
            gameData: '',
            textarea: '',
            equips: [],
            checkAll: false,
            isIndeterminate: true,
            equipOrigins: ['新手奖池', '璧池', '中级奖池', '樱樱樱池', '成长无忧池'],
            currentRule: '',
            ruleList: [],
            tableData: [],
            topChef: [],
            officialGameData: {},
            myGameData: null,
            curWeekRule: null,
            equipOptions: [
                {
                    value: '请选择池子',
                    rarityOneLimit: 1,
                    rarityTwoLimit: 1,
                    rarityThreeLimit: 1
                }
            ],
            gloabalEquipOption: {
                rarityOneLimit: 1,
                rarityTwoLimit: 1,
                rarityThreeLimit: 1
            },
            rarityLimitOption: [0, 1, 2, 3]
        },
        computed: {
            hidePagination() {
                return this.topChef.length < (this.page.pageSize + 1) ? true : false;
            }
        },
        mounted() {

        },
        created() {
            this.init();
        },
        methods: {
            async init() {
                this.initRuleSelected();
                await this.loadData();
            },
            buildMyData() {
                let data1 = localStorage.getItem('recipeAndchef');
                let data2 = localStorage.getItem('equips');
                if (data1 != null && data2 != null) {
                    data1 = JSON.parse(data1);
                    data2 = JSON.parse(data2);
                    window.importMyData(data1.chefs, data1.recipes, data2)
                }
            },
            async loadData() {

                let data = await this.getOfficeGameData();

                let officialGameData = new com.example.entity.OfficialGameData();
                officialGameData.chefs = data.chefs;
                officialGameData.equips = data.equips;
                officialGameData.materials = data.materials;
                officialGameData.recipes = data.recipes;
                officialGameData.skills = data.skills;
                officialGameData.buildMap();
                this.officialGameData = officialGameData;

                this.getEquipOrigin(data.equips)

                let myGameData = localStorage.getItem('myGameData');
                if (myGameData != null) {
                    myGameData = JSON.parse(myGameData);
                    let myEquipdata = await this.getMyEquip();

                    if (myEquipdata != null) {
                        myGameData.equips = myEquipdata;
                    }
                    let myGameData1 = importChefsAndRecipesFromFoodGame(officialGameData, myGameData);
                    this.myGameData = myGameData1
                }

            },
            async getOfficeGameData() {
                let data = sessionStorage.getItem('gameData');
                if (data != null) {
                    data = JSON.parse(data);
                } else {
                    //TODO 这里不能跨域，有时间做个代理，从图鉴网拿游戏数据
                    // let data = await (await fetch('https://bcjh.oschina.io/data/data.min.json')).json();
                    data = await (await fetch('./json/gameData.json')).json();
                    sessionStorage.setItem('gameData', JSON.stringify(data))
                }
                return data;
            },
            getMyEquip() {
                let myEquipdata = localStorage.getItem('myEquip');
                if (myEquipdata != null && myEquipdata != '') {
                    myEquipdata = JSON.parse(myEquipdata);
                } else {
                    myEquipdata = ["金烤叉", "银烤叉", "铜烤叉", "金平铲", "银平铲", "铜平铲", "金斩骨刀", "银斩骨刀", "铜斩骨刀", "象牙筷", "银骨筷", "铜竹筷", "豪华蒸笼", "双层蒸笼", "简易蒸笼", "金漏勺", "银漏勺", "铜漏勺"];
                }
                return myEquipdata;
            },
            async updateData() {
                let myGameData = localStorage.getItem('myGameData')
                if (myGameData != null) {
                    myGameData = JSON.parse(myGameData);
                    let myEquipdata = await this.getMyEquip();
                    myGameData.equips = myEquipdata;
                    let myGameData1 = importChefsAndRecipesFromFoodGame(this.officialGameData, myGameData);
                    this.myGameData = myGameData1
                }
            },
            getEquipOrigin(equips) {
                const result = new Set();
                for (let item of equips) {
                    if (item.origin.indexOf('<br>') != -1) {
                        continue;
                    }
                    if (item.origin.indexOf('限时任务') != -1) {
                        continue;
                    }
                    if (item.origin.indexOf('主线') != -1) {
                        continue;
                    }
                    result.add(item.origin)
                }
                this.equipOrigins = []
                for (let originName of result) {
                    this.equipOrigins.push(originName)
                }
            },
            handleCurrentChange(page) {
                let begin = (page - 1) * 10;
                let end = begin + 10;
                let sliceData = this.topChef.slice(begin, end);
                this.tableData = [];
                for (let temp of sliceData) {
                    this.tableData.push(temp)
                }
            },
            async initRuleSelected() {
                let data = await (await fetch('https://bcjh.xyz/api/get_etc_rule')).json();

                //如果是周五下午到周日22点，则尝试获取本周的厨神数据
                let curWeekRuleResult = await this.getCurrentWeekRule();

                this.ruleList = []
                if (curWeekRuleResult) {
                    this.ruleList.push({
                        label: '本周御前',
                        value: -1
                    })
                }

                let ruleList = this.ruleList;
                for (let item of data) {
                    ruleList.push({
                        label: item.tag,
                        value: item['start_time']
                    })
                }
            },
            async getCurrentWeekRule() {
                //获得今天日期时间
                let curData = new Date();
                let curTime = curData.getTime();
                //设置时间为下午13:00:00
                curData.setHours(13, 0, 0, 0);
                //获得今天与星期五的日差
                let week = 5 - (curData.getDay() ? curData.getDay() : 7);
                //当天下午13:00:00的时间戳 加上今天与周五的 c 日差秒数得到结果时间戳
                let startTime = curData.getTime() + week * 86400000;
                // 周日22点
                let endTime = startTime + 205200000;
                let curWeekRule = null;
                if (curTime >= startTime && curTime <= endTime) {
                    curWeekRule = await (await fetch('https://bcjh.xyz/api/get_rule')).json();
                    this.curWeekRule = curWeekRule;
                    return true;
                }
                return false
            },
            async calculator() {
                if (this.officialGameData == null || this.myGameData == null) {
                    const h = this.$createElement;
                    this.$notify({
                        title: '无法计算',
                        message: h('i', {style: 'color: teal'}, '没有厨师或厨具配置，无法计算')
                    });
                    return;
                }

                let rewardAndCount = null;

                // 挑选本周规则，还是历史规则
                if (this.currentRule == -1) {
                    rewardAndCount = this.curWeekRule;
                } else {
                    rewardAndCount = await (await fetch(`https://bcjh.xyz/api/get_rule?time=${this.currentRule}`)).json();
                }

                let topResult = await com.example.App.main(this.officialGameData, this.myGameData, rewardAndCount);

                topResult = topResult.slice(topResult.length - 100, topResult.length);

                let length = topResult.length;

                this.topChef = []
                for (let i = length - 1; i > 0; i--) {
                    this.topChef.push(topResult[i])
                }
                this.page.total = topResult.length;
                this.handleCurrentChange(1);
            },
            saveRecipesAndChefsData() {
                let data = this.textarea;
                if (data != null && data != '') {
                    localStorage.setItem('myGameData', data)
                    this.updateData(data)
                }
            },
            handleCheckAllChange(val) {
                this.equips = val ? this.equipOrigins : [];
                this.isIndeterminate = false;
            },
            /**
             * 根据筛选的池子，组装厨具列表
             * */
            saveEquipsData() {

                let equips = this.officialGameData.equips;
                let originGroupMap = new Map();


                for (const item of this.equipOrigins) {
                    originGroupMap.set(item, new Array())
                }

                for (const equip of equips) {
                    let group = originGroupMap.get(equip.origin);
                    if (group != null) {
                        group.push(equip)
                    }
                }

                const newEquips = new Array();

                for (let item of this.equipOptions){
                    let equipList = originGroupMap.get(item.value)
                    equipList.forEach(function (equip, index) {
                        newEquips.push(equip.name)
                    })
                }

                localStorage.setItem('myEquip', JSON.stringify(newEquips))
                this.updateData();
            },
            cardClick(event) {

            },
            addEquipOption() {

                this.equipOptions.push({
                    value: '请选择池子',
                    rarityOneLimit: this.gloabalEquipOption.rarityOneLimit,
                    rarityTwoLimit: this.gloabalEquipOption.rarityTwoLimit,
                    rarityThreeLimit: this.gloabalEquipOption.rarityThreeLimit
                })

                this.$nextTick(function () {
                    this.$refs['select' + (this.equipOptions.length - 1)][0].$el.click()
                })

            },
            onClearEquipOrigin(index) {
                let old = this.equipOptions;
                this.equipOptions = []
                let that = this;
                old.forEach(function (item, itemIndex) {
                    if (itemIndex != index) {
                        that.equipOptions.push(item)
                    }
                })
            }

        },
    })


</script>
</body>
</html>
